<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns:th = "http://www.thymeleaf.org"
      lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title></title>
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500|Poppins:400,500,600,700|Roboto:400,500" rel="stylesheet"/>
    <link href="https://cdn.materialdesignicons.com/3.0.39/css/materialdesignicons.min.css" rel="stylesheet" />

    <!-- PLUGINS CSS STYLE -->
    <link href="/assets/plugins/toaster/toastr.min.css" rel="stylesheet" />
    <link href="/assets/plugins/nprogress/nprogress.css" rel="stylesheet" />
    <link href="/assets/plugins/flag-icons/css/flag-icon.min.css" rel="stylesheet"/>
    <link href="/assets/plugins/jvectormap/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
    <link href="/assets/plugins/ladda/ladda.min.css" rel="stylesheet" />
    <link href="/assets/plugins/select2/css/select2.min.css" rel="stylesheet" />
    <link href="/assets/plugins/daterangepicker/daterangepicker.css" rel="stylesheet" />
    <!-- SLEEK CSS -->
    <link id="sleek-css" rel="stylesheet" href="/assets/css/sleek.css" />

    <!-- FAVICON -->
    <link href="/assets/img/favicon.png" rel="shortcut icon" />
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="/assets/plugins/nprogress/nprogress.js"></script>
</head>

<body>
<div th:fragment = "header">
    <header class="main-header " id="header">
        <nav class="navbar navbar-static-top navbar-expand-lg">
            <a class="ml-3" style = "font-size: 30px;text-decoration: none" th:href="@{/}">
                小店~
            </a>
            <!-- search form -->
            <div class="search-form d-none d-lg-inline-block">
                <div class="input-group">
                    <form class="form-inline" th:action = "@{/search}" method = "post">
                        <button type="submit" name="search" id="search-btn" class="btn btn-flat">
                            <i class="mdi mdi-magnify"></i>
                        </button>
                        <input type="text" name="query" id="search-input" class="form-control" placeholder="看看想要什么吧~"
                               autofocus autocomplete="off" />
                    </form>
                </div>
            </div>

            <div class="navbar-right ">
                <ul th:if="${status}" class="nav navbar-nav">
                    <!-- User Account -->
                    <li class="dropdown user-menu" th:object="${user}">
                        <button href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
                            <img th:src="*{avataruri}" class="user-image" alt="User Image" />
                            <span th:text="*{name}" class="d-none d-lg-inline-block">昵称</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <!-- 头像 -->
                            <li class="dropdown-header">
                                <img th:src="*{avataruri}" class="img-circle" alt="User Image" />
                                <div class="d-inline-block">
                                    <span th:text="*{name}"> 用户名 </span><small class="pt-1"><span th:text="*{username}">账号</span></small>
                                </div>
                            </li>

                            <li>
                                <a th:href="@{'/profile='+${user.username}}">
                                    <i class="mdi mdi-account"></i> 个人中心
                                </a>
                            </li>
                            <li class="dropdown-footer">
                                <a th:href="@{/logout}"> <i class="mdi mdi-logout"></i> 登出 </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul th:unless="${status}" class="nav navbar-nav">
                    <li class="dropdown user-menu">
                        <button href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
                            <img src="/assets/img/avatar.jpg" class="user-image" alt="User Image" />
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <!-- 头像 -->
                            <li>
                                <a th:href="@{/login}">
                                    <i class="mdi mdi-account"></i> 登录
                                </a>
                            </li>
                            <li>
                                <a th:href="@{/register}">
                                    <i class="mdi mdi-logout"></i> 注册
                                </a>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
    </header>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCn8TFXGg17HAUcNpkwtxxyT9Io9B_NcM" defer></script>
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/assets/plugins/toaster/toastr.min.js"></script>
<script src="/assets/plugins/slimscrollbar/jquery.slimscroll.min.js"></script>
<script src="/assets/plugins/charts/Chart.min.js"></script>
<script src="/assets/plugins/ladda/spin.min.js"></script>
<script src="/assets/plugins/ladda/ladda.min.js"></script>
<script src="/assets/plugins/jquery-mask-input/jquery.mask.min.js"></script>
<script src="/assets/plugins/select2/js/select2.min.js"></script>
<script src="/assets/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
<script src="/assets/plugins/jvectormap/jquery-jvectormap-world-mill.js"></script>
<script src="/assets/plugins/daterangepicker/moment.min.js"></script>
<script src="/assets/plugins/daterangepicker/daterangepicker.js"></script>
<script src="/assets/plugins/jekyll-search.min.js"></script>
<script src="/assets/js/sleek.js"></script>
<script src="/assets/js/chart.js"></script>
<script src="/assets/js/date-range.js"></script>
<script src="/assets/js/map.js"></script>
<script src="/assets/js/custom.js"></script>
</body>
</html>
